<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件插槽</title>
</head>

<body>


    <div id="app">
        <my-a href="http://www.baidu.com">
            <div>文字</div>
            <button>按钮</button>
        </my-a>
        <my-a></my-a>
        <my-site>
            <template v-slot:mainx>
                <div>主体内容1</div>
                <div>主体内容2</div>
            </template>
            <template v-slot:footx>
      
                <div>脚部内容</div>
         
            </template>
            <template v-slot:headx>
                <div>头部内容</div>
            </template>
            <template v-slot:default>
                <div>无名插槽</div>
            </template>
        </my-site>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('my-a', {
            props: ["href"],
            template: `
            <a :href=href>
                <span>▢</span>
                <span>
                    <slot>
                        <div>默认内容</div>
                    </slot>
                </span>
                 
            </a>
            `
        })
        Vue.component('my-site',{
            template:`
                <div class="my-site-contaienr">
                    <header>
                        <slot name="headx"></slot>
                    </header>
                    <main>
                        <slot name="mainx"></slot>    
                    </main>
                    <footer>
                        <slot name="footx"></slot> 
                    </footer>
                    <hr>
                    <slot></slot>
                </div>
            `,
        })
        new Vue({

        }).$mount('#app')
    </script>
</body>

</html>